<script setup lang="ts">
import { useLayoutConfigStore } from '@/store/layoutConfig'

const route = useRoute()
const router = useRouter()
// console.log(1111, route);

onMounted(() => {
  let tag = route.matched[route.matched.length - 1]
  // console.log(55555, tag);
  // if (route.matched.length > 2) {
  //   layoutConfig.selectMenu(tag)
  // }
  layoutConfig.selectMenu(tag)
})

const layoutConfig = useLayoutConfigStore()
const tags = computed(() => layoutConfig.tabTags)

// 点击标签页面
const handelMenu = (tag: any) => {
  router.push(tag.path)
  layoutConfig.selectMenu(tag)
}

// 关闭标签页面
const handelClose = (tag: any, index: number) => {
  // 通过pinia管理
  layoutConfig.updateTags(tag)
  //如果关闭的不是当前页面
  if (tag.name !== route.name) return
  if (index === layoutConfig.tabTags.length) {
    layoutConfig.selectMenu(tags.value[index - 1])
    router.push(tags.value[index - 1].path)
  } else {
    layoutConfig.selectMenu(tags.value[index])
    router.push(tags.value[index].path)
  }
}

</script>

<template>
  <div class="h-50px w-full flex items-center bg-[#f9f9f9]">
    <div class="w-[calc(100%-32px)] mx-auto">
      <el-tag v-for="(tag, index) in tags" :key="index" :closable="tag.meta.title !== '首页'" size="large"
        class="min-w-75px mr-10px mt-10px cursor-pointer text-[#333639] border-[#9d9e9f] hover:border hover:border-#22656d"
        :effect="route.fullPath === tag.path ? 'dark' : 'plain'" @click="handelMenu(tag)"
        @close="handelClose(tag, index)">
        {{ tag.meta.title }}
      </el-tag>
    </div>
  </div>
</template>

<style scoped lang="scss">
.el-tag {
  :deep(.el-icon.el-tag__close) {
    color: #333639;

    &:hover {
      background-color: #b6cdcf !important;
    }
  }
}

.el-tag.el-tag--dark {
  background-color: #eef4f5 !important;
  color: #316c72 !important;
}
</style>